<template>
  <main class="post">
    <a-form-model ref="roleForm"
                  :rules="rules"
                  :label-col="labelCol"
                  :wrapper-col="wrapperCol" :model="form">
      <a-form-model-item label="科室名称" prop="depName">
        <a-input v-model="form.depName" placeholder="请输入角色名称"/>
      </a-form-model-item>
    </a-form-model>
    <div class="footer">
      <a-row>
        <c-btn offset="18" span="3" type="primary" title="保存" @click="save"></c-btn>
        <c-btn span="3" type="default" title="取消" @click="$emit('update.visable',flase)"></c-btn>
      </a-row>
    </div>
  </main>
</template>

<script lang="js">
  import {add,update} from '@/api/userDepartment';
import {findTrees} from "@/api/resource";
export default {
  props:{
    type:{
      default:'add'
    },
    editData:{
      default:{}
    },
  },
  data() {
    return {
      labelCol: {span: 4},
      wrapperCol: {span: 20},
      form: {
        depName: "",
      },
      rules: {
        depName: [
          { required: true, message: '请输入科室名称', trigger: 'blur' },
        ],
      },
      treeData : [],
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
    }
  },
  created() {
    console.log(this.type ,this.editData);
    if(this.type ==='edit'){
      this.getEditData()
    }
    this.getRoleTree();
  },
  methods:{
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys);
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    async getRoleTree(){
      let params={}
      if(this.form.roleId){
        params={
          roleId:this.form.roleId
        }
      }
      const res = await findTrees(params)
      console.log(res);
      const arr = this.dealTreeData(res.data.data)
      this.treeData = arr
    },
    dealTreeData(arr){
        arr.forEach(item=>{
            item.title = item.name;
            item.key = item.id;
            if(item.checked){
              this.checkedKeys.push(item.id);
            }
            if(item.children.length>0){
              return this.dealTreeData(item.children)
            }
            return item;
        })
       return arr;
    },
    save(){
      this.$refs['roleForm'].validate((valid)=>{
        console.log(valid)
        if(valid){
          if(this.type==='add') this.setAddData();
          if(this.type ==='edit') this.setEditData()
        }else{
          this.$message.error('请完善表单信息')
        }
      })
    },
    async setAddData(){
      const params = {
        ...this.form
      }
      const res = await add(params);
      if(res['msg'] ==='ok'){
        this.$message.success('添加成功')
        this.$emit('update:visible',false)
        this.$emit('success',res)
      }else{
        this.$message.error(res.msg)
      }
    },
    async setEditData(){
      console.log(this.editData)
      this.form.depTid = this.editData.depTid
      const params = {
        ...this.form
      }
      console.log(this.form)
      const res = await update(params);
      if(res['msg'] ==='ok'){
        this.$message.success('编辑成功')
        this.$emit('update:visible',false)
        this.$emit('success',res)
      }else{
        this.$message.error(res.msg)
      }
    },
    getEditData(){
      this.form.depName = this.editData.depName;
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
